$infoItemDetailMdSpace: 8;
$infoItemInfoMdSpace: 5;
$infoItemTotalPriceMdSpace: 2;
$infoItemRemoveMdSpace: 1;

.line-item {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid $border-color;

    &.is-discount {
        .line-item-total-price {
            color: $success;
        }
    }

    &:last-child {
        border-bottom: 0;
    }
}

.line-item-info {
    order: 1;
    margin-bottom: $spacer;
    // Equals: .col-10 .col-md-5
    @include make-col-ready();
    @include make-col(10);
    @include media-breakpoint-up(md) {
        @include make-col($infoItemInfoMdSpace);
    }
}

.line-item-details {
    // Equals: .col-12 .col-sm-7 .col-md-8;
    @include make-col-ready();
    @include make-col(12);
    @include media-breakpoint-up(sm) {
        @include make-col(7);
    }
    @include media-breakpoint-up(md) {
        @include make-col($infoItemDetailMdSpace);
    }
}

.line-item-quantity {
    order: 3;
    margin-bottom: $spacer-sm;
    // Equals: .col-12 .col-sm-4 .col-md-2;
    @include make-col-ready();
    @include make-col(12);
    @include media-breakpoint-up(sm) {
        @include make-col(4);
    }
    @include media-breakpoint-up(md) {
        @include make-col(2);
    }
}

.line-item-quantity-label {
    @include make-col-ready();
    @include make-col(6);
    @include media-breakpoint-up(sm) {
        @include make-col(12);
    }
}

.line-item-quantity-select-wrapper {
    @include make-col-ready();
    @include make-col(6);
    @include media-breakpoint-up(sm) {
        @include make-col(12);
    }
}

.line-item-unit-price {
    display: none;
    // Equals: .col-12 .col-sm-4 .col-md-2;
    @include make-col(12);
    @include media-breakpoint-up(sm) {
        @include make-col(4);
    }
    @include media-breakpoint-up(md) {
        @include make-col(2);
    }
}

.line-item-tax-price {
    justify-content: flex-end;
    @include make-col(12);
    @include media-breakpoint-up(sm) {
        @include make-col(4);
    }
    @include media-breakpoint-up(md) {
        @include make-col(2);
    }
}

.line-item-total-price {
    order: 4;
    font-weight: $font-weight-bold;
    justify-content: flex-end;
    // Equals: .col-12 .col-sm-4 .col-md-2;
    @include make-col-ready();
    @include make-col(12);
    @include media-breakpoint-up(sm) {
        @include make-col(4);
    }
    @include media-breakpoint-up(md) {
        @include make-col($infoItemTotalPriceMdSpace);
    }
}

.line-item-remove {
    order: 2;
    text-align: right;
    // Equals: .col-2 .col-md-1;
    @include make-col-ready();
    @include make-col(2);
    @include media-breakpoint-up(md) {
        @include make-col($infoItemRemoveMdSpace);
    }
}

// Always display columns underneath each other for offcanvas mode
.is-offcanvas {
    .line-item-info {
        @include make-col(10);
    }

    .line-item-details {
        @include make-col(12);
    }

    .line-item-quantity {
        @include make-col(12);
    }

    .line-item-quantity-label {
        @include make-col(7);
    }

    .line-item-quantity-select-wrapper {
        @include make-col(5);
    }

    .line-item-unit-price {
        @include make-col(12);
        display: none;
        font-size: $font-size-sm;
        font-style: italic;

        &.is-shown {
            display: flex;
            justify-content: flex-end;
        }
    }

    .line-item-tax-price {
        @include make-col(12);
    }

    .line-item-total-price {
        @include make-col(12);
    }

    .line-item-remove {
        @include make-col(2);
    }

    .line-item-details-container {
        padding-left: 0;
    }

    .line-item-unit-price-value-descriptor {
        display: inline;
    }

    .line-item-unit-price-label,
    .line-item-tax-price-label,
    .line-item-total-price-label {
        @include visually-hidden();
    }
}

.no-remove-button {
    // Info column needs to use more gird space when no remove button exists as last row.
    .line-item-info {
        @include media-breakpoint-up(md) {
            @include make-col($infoItemInfoMdSpace + $infoItemRemoveMdSpace);
        }
    }
    .line-item-details {
        @include media-breakpoint-up(md) {
            @include make-col($infoItemDetailMdSpace + 1);
        }
    }
}

.no-summary {
    // Info column needs to use more gird space when no subtotal column exists.
    .line-item-info {
        @include media-breakpoint-up(md) {
            @include make-col($infoItemInfoMdSpace + $infoItemTotalPriceMdSpace);
        }
    }
    .line-item-details {
        @include media-breakpoint-up(md) {
            @include make-col($infoItemDetailMdSpace + 1);
        }
    }
}

.no-summary.no-remove-button {
    // Info column needs to use more gird space when no remove button and subtotal column exists.
    .line-item-info {
        @include media-breakpoint-up(md) {
            @include make-col(
                $infoItemInfoMdSpace + $infoItemRemoveMdSpace + $infoItemTotalPriceMdSpace
            );
        }
    }
    .line-item-details {
        @include media-breakpoint-up(md) {
            @include make-col($infoItemDetailMdSpace + 2);
        }
    }
}

.line-item.is-order {
    margin-left: 20px;
    margin-right: 20px;
}

.line-item.is-order .line-item-children .line-item {
    margin-left: 0;
    margin-right: 0;
}

// Reduced table spacing for table grid
.line-item-info,
.line-item-details,
.line-item-quantity,
.line-item-unit-price,
.line-item-total-price,
.line-item-tax-price,
.line-item-remove {
    padding-right: $spacer-sm / 2;
    padding-left: $spacer-sm / 2;
}

.line-item-discount-icon,
.line-item-icon {
    text-align: center;
    height: 100%;

    .icon {
        height: 100%;

        > svg {
            top: 0;
        }
    }
}

.line-item-discount,
.line-item-promotion {
    .line-item-icon .icon {
        color: $success;
    }
}

.line-item-container {
    .line-item-icon .icon {
        color: $secondary;
    }
}

.line-item-nested-icon {
    background-color: $gray-600;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    display: flex;
    margin: 0 auto;
    width: 65px;
    height: 65px;

    .icon {
        > svg {
            top: 0;
        }
    }
}

.line-item-unit-price,
.line-item-tax-price {
    order: 5;
}

.line-item-img-container {
    text-align: center;
    width: 70px;
    margin-bottom: $spacer-sm;
}

.line-item-img-link {
    display: block;
}

.line-item-img {
    width: 100%;
    height: 70px;
    object-fit: contain;
    padding: $spacer-xs;
    border: 1px solid $border-color;
    border-radius: $border-radius-sm;
}

.line-item-total-price,
.line-item-tax-price {
    justify-content: space-between;
    display: flex;
}

@include media-breakpoint-only(xs) {
    .line-item-tax-price,
    .line-item-unit-price {
        font-size: $font-size-sm;
        font-style: italic;
    }
}

@include media-breakpoint-up(sm) {
    .line-item-unit-price {
        display: flex;
        justify-content: flex-end;
    }
}

.line-item-unit-price.is-shown {
    display: flex;
    justify-content: flex-end;
}

.line-item-quantity-label,
.line-item-unit-price-label,
.line-item-total-price-label,
.line-item-tax-price-label {
    font-weight: $font-weight-bold;
    margin-bottom: $spacer-sm;
}

.line-item-quantity-row {
    align-items: center;
    margin-bottom: $spacer-sm;
}

.line-item-details-characteristics {
    font-size: $font-size-sm;
    margin: $spacer-sm 0;

    .line-item-details-characteristics-option {
        font-weight: $font-weight-bold;
    }
}

.line-item-variants {
    font-size: $font-size-sm;
    margin-bottom: $spacer-sm;
}

.line-item-variants-properties {
    display: flex;
}

.line-item-variants-properties-name {
    font-weight: $font-weight-bold;
    margin-right: $spacer-sm;
}

// Apply tablet and desktop styling only for default and order items
.is-default,
.is-order {
    @include media-breakpoint-up(sm) {
        .line-item-quantity-container {
            margin-left: auto;
        }

        .line-item-quantity-row {
            align-items: normal;
            margin-bottom: 0;
        }

        .line-item-quantity {
            flex-direction: column;
            display: flex;
        }

        .line-item-unit-price,
        .line-item-total-price,
        .line-item-tax-price {
            text-align: right;
            justify-content: normal;
            flex-direction: column;
        }

        .line-item-tax-price {
            order: 4;
        }

        .line-item-total-price {
            order: 5;
        }
    }

    @include media-breakpoint-up(md) {
        .line-item-info,
        .line-item-quantity,
        .line-item-unit-price,
        .line-item-total-price,
        .line-item-tax-price,
        .line-item-remove {
            order: 0;
        }

        .line-item-info {
            margin-bottom: 0;
        }

        .line-item-quantity-label {
            display: none;
        }
    }
}

// Styling for nested line items
.line-item-children {
    background-color: $gray-100;
    font-size: $font-size-sm;
    width: 100%;
    padding: 10px 20px;
    order: 10;
    margin-top: 10px;
    flex-shrink: initial;

    .line-item-children-elements {
        padding: 12px 0 0;
    }

    .line-item-headline {
        padding: 0;
        font-weight: $font-weight-semibold;
    }

    .line-item-change-button {
        width: fit-content;
        margin: 0 12px;
        font-size: 12px;
        text-decoration: underline;
        background-color: transparent;
        border-style: none;

        &:focus {
            outline: none;
        }
    }

    .line-item-collapse {
        margin: 0;
        align-items: center;
    }

    .line-item-collapse-container,
    .line-item-child-label {
        padding: 0;
    }

    .line-item-child-label {
        position: relative;
    }

    .line-item-collapse-icon-container {
        padding: 0;
        text-align: right;
    }

    .line-item-collapse-button,
    .line-item-child-remove-icon {
        background-color: transparent;
        border-style: none;

        &:focus {
            outline: none;
        }
    }

    .line-item-collapse-button > .line-item-collapse-icon {
        transform: rotate(180deg);
        transition: all 0.2s ease-out;
    }

    .line-item-collapse-button.collapsed > .line-item-collapse-icon {
        transform: rotate(0deg);
    }

    .line-item-children-element {
        margin: 0;
        padding: 8px 4px 0;
    }

    .line-item-children-element > .nesting-level-0 {
        list-style: none;
    }

    .line-item-children-element:last-child,
    .line-item-children-element-divider:last-child {
        border-style: none;
    }

    .line-item-child-label-bullet {
        display: list-item;
    }

    .line-item-child-total-price {
        padding: 0;
        text-align: right;
        font-weight: $font-weight-semibold;
    }

    .line-item-child-remove-icon-container {
        padding: 0;
        text-align: right;
    }

    .line-item-children-element-divider {
        border-top: 1px solid $sw-border-color;
        margin: $spacer-md 0;
    }

    &.nesting-level-2 {
        background-color: darken($gray-100, 3.5%);
    }

    &.nesting-level-3 {
        background-color: darken($gray-100, 5.5%);
    }

    .line-item-details-container {
        padding-left: 0;
    }

    .line-item-headline-text {
        font-weight: normal;
    }
}

@include media-breakpoint-up(md) {
    .line-item-children.nesting-level-1 {
        margin-left: 96px;
    }
}

@include media-breakpoint-up(lg) {
    .line-item-children.nesting-level-1 {
        margin-left: 4px;
    }
}

@include media-breakpoint-up(xl) {
    .line-item-children.nesting-level-1 {
        margin-left: 96px;
    }
}

// Always avoid nested line item indentation for offcanvas
.is-offcanvas .line-item-children {
    margin-left: 0;
    padding-left: 12px;
    padding-right: 12px;
}

.line-item-product-number {
    margin-bottom: $spacer-sm;
    font-size: $font-size-sm;
}

.line-item-delivery-date {
    font-size: $font-size-sm;
}

.line-item-label {
    color: $body-color;
    font-weight: $font-weight-bold;
}

a.line-item-label {
    &:hover {
        color: $primary;
    }
}

.line-item-total-price-value {
    text-align: right;
}

.line-item-tax-price-label {
    display: inline;
    font-weight: normal;
    margin-right: 5px;
}

@include media-breakpoint-only(xs) {
    .line-item-unit-price-label,
    .line-item-total-price-label {
        @include visually-hidden();
    }
}

@include media-breakpoint-up(md) {
    .line-item-unit-price-label,
    .line-item-tax-price-label,
    .line-item-total-price-label {
        @include visually-hidden();
    }
}

@include media-breakpoint-up(sm) {
    .line-item-unit-price-value-descriptor {
        display: none;
    }

    .line-item-tax-price-label {
        display: block;
        font-weight: bold;
        margin-right: 0;
    }
}

@include media-breakpoint-up(md) {
    .line-item-details-container {
        padding-left: $spacer-xs;
    }
}

.line-item-characteristics {
    margin: $spacer-sm 0;
    font-size: $font-size-sm;

    .line-item-characteristics-option {
        font-weight: $font-weight-bold;
    }
}

.line-item-remove-button .icon {
    color: inherit;
}
